<template>
  <div :class="$style.container">
    <el-card 
      :class="$style.card" 
    >
      <h4>订单号: {{ orderId }}</h4>
      <ul :class="$style.list">
        <li 
          v-for="item in lists" 
          :key="item.doubanId">
          <img v-lazy="item.coverurl">
          <div :class="$style.right">
            <span>实付金额：</span>
            <span>￥{{ item.price }}</span>
          </div>
          <div :class="$style.center">
            <p>[ {{ item.genres.join('、') }} ]</p>
            <p>{{ item.original_title }}</p>
            <p>{{ item.collect_count }} 人看过这部电影, {{ item.wish_count }} 人想看</p>
          </div>
        </li>
      </ul>
      <Pay @payChannel="handlePayChannelChange"/>
      <div :class="$style.bottom">
        <div :class="$style.left">
          <p>请在 <strong> 24小时0分钟</strong>以内支付完成，如未完成此订单将自动关闭。需重新购买！</p>
        </div>
        <div :class="$style.right">
          <p>应付金额: <span>￥ {{ total }}</span></p>
          <el-button @click.stop="handlePayClick">立即支付</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import http from '../APIService/http'
import Pay from '../components/cashier/pay'
import * as math from 'mathjs'
export default {
  components: {
    Pay
  },
  data() {
    return {
      carts: [],
      orderId: '',
      payChannel: 'zfbPay'
    }
  },
  computed: {
    total() {
      let totalMoney = 0
      this.lists.forEach(item => {
        totalMoney = math.add(totalMoney, item.price)
      })
      return totalMoney
    }
  },
  async asyncData(ctx) {
    try {
      let params = {
        orderId: ctx.query.id,
        token: ctx.app.$cookiz.get(ctx.app.$api.token)
      }
      let res = await http.get(`/order/getOrder`, params)
      if (res.code === 0) {
        return {
          lists: res.data.films,
          orderId: ctx.query.id
        }
      }
    } catch (err) {
      console.log(`get cart fail:`, err)
    }
  },
  methods: {
    handlePayChannelChange(data) {
      this.payChannel = data
    },
    /**
     * 立即支付
     */
    async handlePayClick() {
      try {
        let params = {
          method: this.payChannel,
          id: this.orderId
        }
        let res = await http.post(`/order/pay`, params)
        if (res.code === 0) {
          this.$alert('支付成功', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              this.$router.push({
                path: '/'
              })
            }
          })
        }
      } catch (err) {
        console.log('pay fail:', err)
      }
    }
  }
}
</script>

<style lang='scss' module>
.container {
  .card {
    margin: 50px 0px;
    padding-top: 0px;
    h4 {
      margin-left: 12px;
      color: #07111b;
      font-size: 16px;
      line-height: 60px;
    }
    .list {
      padding-bottom: 36px;
      li {
        margin-bottom: 1px;
        padding: 24px;
        box-sizing: border-box;
        height: 138px;
        background: #f3f5f7;
        &:after {
          display: block;
          content: ' ';
          overflow: hidden;
          clear: both;
        }
        img {
          margin-right: 24px;
          float: left;
          width: 160px;
          height: 90px;
          object-fit: cover;
        }
        .right {
          float: right;
          width: 286px;
          line-height: 90px;
          text-align: left;
          span {
            &:nth-child(1) {
              font-size: 14px;
              color: #93999f;
            }
            &:nth-child(2) {
              font-size: 16px;
              color: #f01414;
            }
          }
        }
        .center {
          p {
            &:nth-child(1) {
              margin-top: 8px;
              font-size: 12px;
              color: #07111b;
              line-height: 24px;
            }
            &:nth-child(2) {
              font-size: 16px;
              color: #07111b;
              line-height: 24px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            &:nth-child(3) {
              font-size: 14px;
              color: #f20d0d;
              line-height: 24px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
    .bottom {
      margin-bottom: 30px;
      &:after {
        display: block;
        content: ' ';
        overflow: hidden;
        clear: both;
      }
      .left {
        float: left;
        p {
          padding-top: 5px !important;
          font-size: 14px;
          color: #f90;
          padding-top: 32px;
          line-height: 20px;
        }
      }
      .right {
        float: right;
        p {
          font-size: 14px;
          color: #07111b;
          height: 20px;
          text-align: right;
          span {
            color: #f01414;
            font-size: 24px;
            line-height: 24px;
            height: 24px;
          }
        }
        button {
          margin-top: 30px;
          background: #f01414;
          color: #fff;
          width: 120px;
          &:hover,
          &:focus {
            color: #fff;
            border-color: #f01414;
          }
        }
      }
    }
  }
}
</style>
